<template>
  <div class="full-height page-content bg-white content">
    <q-tabs
      v-model="tab"
      narrow-indicator
      inline-label
      dense
      align="left"
      indicator-color="primary"
      active-color="primary"
      style="padding: 10px 4px 0"
      class="tab-label"
    >
      <q-tab name="1"  icon="iconfont icontubiao-121" :label="`${statusList[1].label}原因`"/>
      <q-tab name="2"   icon="iconfont icontubiao5-29" :label="`${statusList[1].label}设置`" />
      <q-tab name="3"   icon="iconfont icontubiao-15" label="摄像头配置" />
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" animated class="full-height no-padding" style="border-radius: 6px">
      <q-tab-panel name="1" class="padding-20">
        <stop-content />
      </q-tab-panel>
      <q-tab-panel name="2" style="padding: 20px 0">
        <stop-set />
      </q-tab-panel>
      <q-tab-panel name="3" class="padding-20">
        <camera />
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script>
import camera from './camera'
import stopContent from './stop-content'
import stopSet from './stop-set'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'index',
  components: {
    camera,
    stopContent,
    stopSet
  },
  data () {
    return {
      tab: '1' // 选中的 tab
    }
  },
  computed: {
    ...mapGetters(['statusList'])
  },
  mounted () {
    this.saveCustomerSet()
  },
  methods: {
    ...mapActions([
      'saveCustomerSet'
    ])
  }
}
</script>
<style scoped lang="scss">
</style>
